<template>
    <div class="papers-container">
        <PaperItem v-for="(item, index) in papers" :key="index" :info="item" />
        <n-empty description="暂无符合要求的搜索结果" v-show="papers.length === 0 && !is_loading"></n-empty>
        <n-pagination
            v-model:page="page"
            v-model:page-size="page_size"
            style="margin-bottom: 20px;"
            :item-count="result_count"
            :page-sizes="[10, 15, 20]"
            showSizePicker
            :on-update:page="updatePage"
            :on-update:page-size="updatePageSize"
            v-show="papers.length !== 0"
        />
    </div>
</template>

<script setup lang='ts'>
import PaperItem from '@/components/search/PaperItem.vue'

const props = defineProps([
    'page', 'page_size', 'papers', 'result_count', 'is_loading'
])

const emit = defineEmits(['updatePage', 'updatePageSize'])

// 更新页码
const updatePage = ((val: number) => {
    emit('updatePage', val)
})

// 更新每页显示个数
const updatePageSize = ((val: number) => {
    emit('updatePageSize', val)
})

</script>

<style scoped>
.papers-container {
    margin-top: 50px;
}

.n-pagination {
    margin-top: 30px;
    float: right;
}
</style>